import React, { Component } from "react";

class Child extends Component {
  state = {
    count: 1,
    prevCount: 1,
  };

  // getDerivedStateFromProps生命周期前面必须加static关键字
  // 必须要有state，而且必须要去返回一个对象或者null
  // 里面可以接收两个参数是props和state
  // 要从props那里去得到一个state
  // 有一个state的值，要跟着props的某个值的变化而变化
  static getDerivedStateFromProps(props, state) {
    console.log("getDerivedStateFromProps", props);
    // return {
    //   count: props.f_count,
    // };

    // 1: props.f_count 10   state.prevCount 1   ->   count 10   prevCount  10
    // 2: props.f_count 20   state.prevCount 10  ->   count 20   prevCount  20
    // 3: props.f_count 20   state.prevCount 20  ->   count 40   prevCount  20
    if (props.f_count === state.prevCount) {
      return null;
    } else {
      return {
        count: props.f_count,
        prevCount: props.f_count,
      };
    }
  }

  fn = () => {
    this.setState({
      count: 40,
    });
  };

  render() {
    return (
      <div>
        子组件 - {this.state.count} - <button onClick={this.fn}>btn2</button>
      </div>
    );
  }

  // getSnapshotBeforeUpdate  在更新之前得到一条记录
  // getSnapshotBeforeUpdate需要和componentDidUpdate一起使用
  // 只有和ui相关的内容(元素的样式)return才是有意义的,DOM 中捕获一些信息
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    return 123;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate", snapshot);
  }
}

export default Child;
